<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>LoginandRegister</title>
  <link rel="stylesheet" href="/front/plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="../styles/loginandregister.css">
  <link rel="Shortcut Icon" href="/front/favicon.ico">

</head>

<body>
<div>
  <div id="header">
    <div class="logo">
      <a href="/front/index.html">
        <div class="logo-link"><img src="../images/logo.png" class="pic1"></div>
      </a>
      <div class="header-right">
        <a id="wza">网站无障碍</a>
        <a id="gj">"登录页面"改进建议 </a>
      </div>
    </div>
  </div>
  <div id="content">
    <div class="login-box-warp">
      <div style="height: 50px;">
        <div id="logintext1">
          <a href="../page/login.html">用户登录</a>
        </div>
        <div id="logintext2" style="border-bottom: rgb(58, 58, 58) 3px solid;">
          <a href="../page/register.html">用户注册</a>
        </div>
      </div>

      <div style="margin-top: 20px;" id="app">
        <el-form id="loginform" :model="loginForm" :rules="loginRules" ref="loginForm">
          <div class="logindiv">
            <el-form-item prop="username">
              <div style="display: inline;"><img src="../images/用户名.png" class="pic2"></div>
              <el-input v-model="loginForm.username" name="username" type="text" class="fm-id" id="fm-login-id"
                        tabindex="1"
                        aria-label="请输入账号" placeholder="请输入账号" autocapitalize="off"/>
            </el-form-item>
          </div>
          <div class="logindiv">
            <el-form-item prop="password">
              <div style="display: inline;"><img src="../images/密码.png" class="pic2"></div>
              <el-input v-model="loginForm.password" name="password" type="password" class="fm-password"
                        id="fm-login-password"
                        tabindex="2" aria-label="请输入注册密码" placeholder="请输入注册密码" maxlength="40"
                        autocapitalize="off" @keyup.enter.native="handleRegister()"/>
            </el-form-item>
          </div>
          <div class="logindiv">
            <div id="cfm-login-button" class="cfm-button">
              <el-form-item>
                <el-button tabindex="3" class="fm-button" type="primary" @click.native.prevent="handleRegister()" round>
                  立即注册
                </el-button>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
  <div class="footer">

    <div class="footer-hd">
      <p>
        <a>咨询服务</a>
        <b>|</b>
        <a>店铺建立</a>
        <b>|</b>
        <a>商品管理</a>
        <b>|</b>
        <a>店铺运营</a>
        <b>|</b>
        <a>营销推广</a>
        <b>|</b>
        <a>消费者管理</a>
        <b>|</b>
        <a>客户服务</a>
        <b>|</b>
        <a>仓储物流</a>
        <b>|</b>
        <a>IT服务</a>
        <b>|</b>
        <a>云计算</a>
        <b>|</b>
        <a>云OS</a>
      </p>
    </div>
    <div class="footer-bd">
      <p>
        <span>网上购物商城之利弊，各有所长，各有所短。</span>
      </p>
      <p>
        <span>其利者，一曰价格低廉，以少量之金可得多量之物；二曰品种繁多，以一网之广可观天下之物</span>
      </p>
      <p>
        <span>三曰方便快捷，以一键之动可成千里之行；四曰安全可靠，以无形之网可防有形之盗。</span>
      </p>
      <p>
        <span>其弊者，一曰质量难保，以虚拟之图难辨真伪之物；二曰售后难求，以远隔千里难得及时之助；</span>
      </p>
      <p>
        <span>三曰运输不稳，以物流之快慢难掌握时效之期；四曰信息不全，以网络之限制难获完整之知。</span>
      </p>
    </div>
    <div class="footer-ft" style="font-size:40px;">
      <a href="javascript:void(0)" rel="noopener noreferrer"
         style="margin-left:15px; display:inline-block; background-position:0px 0px; width:36px; height:40px;  background-image: url(http://img.alicdn.com/tps/i1/T1FeW3XXNfXXXXXXXX-36-36.gif);">
      </a>
      <a target="_blank"
         href="http://idinfo.zjamr.zj.gov.cn//bscx.do?method=lzxx&amp;id=3301843301002003002431"
         class="gw-footer-mod" rel="noopener noreferrer"
         style="margin-left:15px; display:inline-block; height: 40px; background-position:0px 0px; width:30px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
      <a href="javascript:void(0)" class="gw-footer-mod" rel="noopener noreferrer"
         style="background-position:-40px 0px; width:33px; margin-left:15px; display:inline-block; height: 40px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
      <a href="javascript:void(0)" class="gw-footer-mod" rel="noopener noreferrer"
         style="background-position:-80px 0px; width:50px; margin-left:15px; display:inline-block; height: 40px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
      <a target="_blank"
         href="https://ss.knet.cn/verifyseal.dll?spm=1.7274553.1997523009.31.alN7ce&amp;&amp;sn=2010062300100001357&amp;pa=20100701"
         class="gw-footer-mod" rel="noopener noreferrer"
         style="background-position:-140px 0px; width:83px; margin-left:15px; display:inline-block; height: 40px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
      <a target="_blank" href="https://www.12377.cn/" class="gw-footer-mod" rel="noopener noreferrer"
         style="background-position:0px -18px; width:250px; background-image: url(//img.alicdn.com/tfs/gw1N7kwRVXXXXbAapXXXXXXXXXX-500-127.png_250x250); margin-left:15px; display:inline-block; height: 40px;">
      </a>
      <a target="_blank" href="http://www.12377.cn/node_548446.htm" class="gw-footer-mod"
         rel="noopener noreferrer"
         style="background-position:-650px 0px; width:105px; margin-left:15px; display:inline-block; height: 40px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
      <a href="javascript:void(0)" class="gw-footer-mod" rel="noopener noreferrer"
         style="background-position:-345px 0px; width:82px; margin-left:15px; display:inline-block; height: 40px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
      <a target="_blank" href="https://credit.szfw.org/CX20160715023573390688.html" class="gw-footer-mod"
         rel="noopener noreferrer"
         style="background-position:-761px 0px; width:97px; margin-left:15px; display:inline-block; height: 40px; background-image: url(https://img.alicdn.com/tfs/gw1EPnIQXXXXXaSXpXXXXXXXXXX-1133-35.jpg);">
      </a>
    </div>
    <!-- #footer END -->
  </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../js/validate.js"></script>
<script src="/front/api/login.js"></script>
<script src="/front/api/register.js"></script>
<script src="../js/alert.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                loading: false,
                userInfo: ''
            }
        },
        computed: {
            loginRules() {
                const validateUsername = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请输入用户名'))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 6) {
                        callback(new Error('密码必须在6位以上'))
                    } else {
                        callback()
                    }
                }
                return {
                    'username': [{'validator': validateUsername, 'trigger': 'blur'}],
                    'password': [{'validator': validatePassword, 'trigger': 'blur'}]
                }
            }
        },
        mounted: function () {
        },
        created() {
        },
        methods: {
            //异步注册方法
            async handleRegister() {
                this.$refs.loginForm.validate(async (valid) => {
                    if (valid) {
                        if (this.loginForm.username && this.loginForm.password) {
                            this.loading = true
                            let res = await registerApi(this.loginForm)
                            this.loading = false
                            if (res.code === 1) {
                                localStorage.setItem('userInfo', JSON.stringify(res.data))//放json
                                this.$alert('注册成功，请前往登录界面', '注册提示', {
                                    confirmButtonText: '确定',
                                    callback: () => {
                                        window.location.href = '/front/page/login.html'
                                    }
                                });


                            } else {
                                this.$message.error(res.msg);
                            }
                        } else {
                            this.$message.error('输入信息错误！');
                        }
                    }
                })
            },
        }
    })
</script>
</body>

</html>